/* CSS for this was adapted from https://css-tricks.com/triangle-breadcrumbs/ */
.alfresco-documentlibrary-AlfBreadcrumb { 
   float: left; 
   height: 30px;
   padding-top: 1px;
   padding-bottom: 1px;
   padding-right: 1px;
   background: @breadcrumb-border-color;
}
.alfresco-documentlibrary-AlfBreadcrumb a {
   color: @link-font-color;
   text-decoration: @link-text-decoration; 
   padding: 5px 15px 5px 30px;
   background: @breadcrumb-background-color;
   position: relative; 
   display: block;
   float: left;
   cursor: pointer;
   height: 20px;
   &:hover {
      colour: @link-font-color-hover;
      text-decoration: @link-text-decoration-hover;
   }
}

.alfresco-documentlibrary-AlfBreadcrumb a:after { 
   content: " ";
   display: block;
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-left: 10px solid @breadcrumb-background-color;
   position: absolute;
   top: 50%;
   margin-top: -15px;
   left: 100%;
   z-index: 2;
}

.alfresco-documentlibrary-AlfBreadcrumb a:before { 
   content: " ";
   display: block;
   width: 0; 
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-left: 10px solid @breadcrumb-border-color;
   position: absolute;
   top: 50%;
   margin-top: -15px;
   margin-left: 1px;
   left: 100%;
   z-index: 1;
}

.alfresco-documentlibrary-AlfBreadcrumb:first-child a {
   padding-left: 10px;
}

.alfresco-documentlibrary-AlfBreadcrumb a:focus {
   outline: none;
}

.alfresco-documentlibrary-AlfBreadcrumb a:hover { background: @breadcrumb-hover-color; }
.alfresco-documentlibrary-AlfBreadcrumb a:hover:after { border-left-color: @breadcrumb-hover-color !important; }
